<template>
  <el-card shadow="never">
    <el-table border  :data="problemDetails" height="37vh" stripe style="width: 100%; min-height: 37vh; max-height: 37vh" @row-click="handleRowClick">
      <el-table-column prop="submitTime" label="提交时间" width="180%" />
      <el-table-column prop="username" label="提交账号" width="120%" />
      <!-- 为显示的内存数据添加 'kb' 单位 -->
      <el-table-column
          prop="memory"
          label="运行内存"
          :formatter="formatMemory"/>
      <!-- 为显示的运行时间添加 'ms' 单位 -->
      <el-table-column
          prop="runTime"
          label="运行时间"
          :formatter="formatRunTime"  />
    </el-table>


    <!-- 将 top 属性设置为较小的值，例如 10vh -->
    <el-dialog v-model="detailsVisible" title="详细信息" width="50%" :top="'5vh'">
      <el-descriptions border>
        <el-descriptions-item label="提交时间">{{ selectedDetail.submitTime }}</el-descriptions-item>
        <el-descriptions-item label="提交账号">{{ selectedDetail.username }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{ selectedDetail.nikeName }}</el-descriptions-item>
        <el-descriptions-item label="编程语言">{{ selectedDetail.language }}</el-descriptions-item>
        <el-descriptions-item label="运行时间">{{ selectedDetail.runTime }}ms</el-descriptions-item>
        <el-descriptions-item label="内存消耗">{{ selectedDetail.memory }}MB</el-descriptions-item>
      </el-descriptions>
      <pre v-html="highlightedCode"></pre>
    </el-dialog>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import axios from 'axios';
import hljs from 'highlight.js';

import { API_BASE_URL, AUTH_TOKEN } from '@/config.ts';
const problemDetails = ref([]);
const selectedDetail = ref({});
const detailsVisible = ref(false);
const highlightedCode = ref('');

const props = defineProps({
  problemId: String
});

// 格式化内存使用，添加 'kb'
function formatMemory(row, column, cellValue) {
  return `${cellValue}kb`;
}

// 格式化运行时间，添加 'ms'
function formatRunTime(row, column, cellValue) {
  return `${cellValue}ms`;
}

const loadProblemDetails = async () => {
  const api = `${API_BASE_URL}/rank/oj/echarts/20`;
  try {
    const response = await axios.get(api, {
      params: {problemId: props.problemId},
      headers: {'token': `${AUTH_TOKEN}`}
    });
    problemDetails.value = response.data.data;
  } catch (error) {
    console.error('Error loading problem details:', error);
  }
};

const handleRowClick = (row) => {
  selectedDetail.value = row;
  detailsVisible.value = true;
};

watch(selectedDetail, (newVal) => {
  if (newVal.code) {
    highlightedCode.value = hljs.highlightAuto(newVal.code).value;
  }
}, { immediate: true });

onMounted(() => {
  loadProblemDetails();
});
</script>

<style scoped>
pre {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  padding: 15px;
  overflow: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
</style>
